<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<scroll-view scroll-x class="tabs-scroll" show-scrollbar="false">
		      <view class="tabs">
		        <view 
		          v-for="(tab, index) in tabs" 
		          :key="index"
		          class="tab-item"
		          :class="{ active: currentTab === index }"
		          @click="switchTab(index)"
		        >
		          {{ tab }}
		        </view>
		      </view>
		</scroll-view>
		<!-- 数据区域 -->
		
			<swiper class="swiper" :current="currentTab" @change="onSwiperChange" :duration="300">
				<swiper-item v-for="(item,index) in tabs" :key="index">	
					<scroll-view scroll-y style="height: 100%;">
						<component :is="components[index]"></component>
					</scroll-view>	
				</swiper-item>
			</swiper>
			
	</view>
</template>

<script>
	import Page1 from '@/component/page1/page1.vue'
	import Page2 from '@/component/page2/page2.vue'
	import Page3 from '@/component/page3/page3.vue'
	
	export default {
		components:{
			Page1,
			Page2,
			Page3
		},
		data() {
			return {
				menuItems:['总览','监视','操作','关于'],
				activeMenu:0,
				tabs:['监视','操作','关于'],
				currentTab:0,
				components:['Page1','Page2','Page3']
			}
		},
		onLoad() {

		},
		methods: {
			switchTab(index){
				this.currentTab = index;
				
			},
			onSwiperChange(e) {
			      this.currentTab = e.detail.current;
				  console.log(plus.os.name)
			},
			exitApp(){
				 // #ifdef APP-PLUS
					console.log(plus.os.name);
				    if (plus.os.name === 'Android') {
				      plus.runtime.quit();
				    } else {
				      // iOS: 跳转到首页或提示用户手动关闭
				      uni.reLaunch({ url: '/pages/index/index' });
				    }
				// #endif
				 
				 // 非APP环境（如H5/小程序）
				// #ifndef APP-PLUS
				    uni.showToast({ title: '当前环境不支持退出', icon: 'none' });
				// #endif
			}
		}
	}
</script>

<style>
	.container {
	  display: flex;
	  flex-direction: column;
	}
	.tabs-scroll {
	  height: 50px;
	  background-color: #f8f8f8;
	  border-bottom: 1px solid #eee;
	}
	.content-scroll{
		margin-top: 100rpx;
		height: calc(100vh-100rpx);
	}
	.tabs {
	  display: flex;
	  height: 100%;
	  white-space: nowrap;
	}
	 
	.tab-item {
	  display: inline-flex;
	  align-items: center;
	  justify-content: center;
	  padding: 0 20px;
	  font-size: 16px;
	  color: #666;
	}
	 
	.tab-item.active {
	  color: #007AFF;
	  font-weight: bold;
	}
	.swiper{
		margin-top: 5rpx;
		height: 100vh;
	}
	.data-card {
	  margin: 20rpx;
	  padding: 20rpx;
	  background-color: #f9f9f9;
	  border-radius: 10rpx;
	  text-align: center;
	}
</style>
